﻿<div style="margin: 5px">Search by Name or email or phone</div>
<div class="input-group">
    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
    <input class="form-control" data-ng-class="{ loading : fetchInProgress == true}" data-auto-focus="true" name="searchCriteria" data-ng-model="searchCriteria" placeholder="Enter at least 3 characters" />
</div>
<span></span>
<div class="alert-warning" data-ng-show="searchCriteria.length >=1 && searchCriteria.length <= 2"><small>Too short! Enter at least 3 characters</small></div>
<div data-ng-show="noMatchesFound" class="alert alert-warning" style="margin-top: 10px;">No members matching specified criteria</div>

<div class="table-responsive">
    <table data-ng-show="dataReady" style="margin-top: 30px;" class="table table-striped table-bordered table-condensed table-hover">
        <thead>
            <tr class="success">
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Mobile Phone</th>
                <th>Member ID</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="member in members">
                <td>{{member.contact.firstName}}</td>
                <td>{{member.contact.lastName}}</td>
                <td>{{member.contact.email}}</td>
                <td>{{member.contact.mobilePhone}}</td>
                <td>{{member.memberId}}</td>
            </tr>
        </tbody>
    </table>
</div>
